<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智能颜色工具箱</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      }

      :root {
        --primary-color: #007AFF;
        --secondary-color: #5856D6;
        --success-color: #34C759;
        --warning-color: #FF9500;
        --error-color: #FF3B30;
        --background-color: #F2F2F7;
        --card-background: #FFFFFF;
        --text-primary: #000000;
        --text-secondary: #8E8E93;
        --border-color: #C6C6C8;
        --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
        --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
        --shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.2);
        --border-radius: 12px;
        --border-radius-large: 20px;
      }

      body {
        background: linear-gradient(135deg, #F2F2F7 0%, #E5E5EA 100%);
        min-height: 100vh;
        padding: 20px;
        color: var(--text-primary);
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      .header {
        text-align: center;
        margin-bottom: 40px;
      }

      .header h1 {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
      }

      .header p {
        font-size: 1.1rem;
        color: var(--text-secondary);
        font-weight: 400;
      }

      .main-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 30px;
      }

      .card {
        background: var(--card-background);
        border-radius: var(--border-radius-large);
        padding: 30px;
        box-shadow: var(--shadow-medium);
        border: 1px solid rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
      }

      .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-heavy);
      }

      .card-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .card-title::before {
        content: '';
        width: 4px;
        height: 20px;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border-radius: 2px;
      }

      /* 图片上传区域 */
      .image-upload-area {
        border: 2px dashed var(--border-color);
        border-radius: var(--border-radius);
        padding: 40px 20px;
        text-align: center;
        transition: all 0.3s ease;
        cursor: pointer;
        background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
      }

      .image-upload-area:hover {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, #F0F8FF 0%, #E6F3FF 100%);
      }

      .image-upload-area.dragover {
        border-color: var(--primary-color);
        background: linear-gradient(135deg, #E6F3FF 0%, #CCE7FF 100%);
        transform: scale(1.02);
      }

      .upload-icon {
        font-size: 3rem;
        color: var(--text-secondary);
        margin-bottom: 15px;
        transition: all 0.3s ease;
      }

      .image-upload-area:hover .upload-icon {
        color: var(--primary-color);
        transform: scale(1.1);
      }

      .upload-text {
        font-size: 1.1rem;
        color: var(--text-secondary);
        margin-bottom: 10px;
      }

      .upload-hint {
        font-size: 0.9rem;
        color: var(--text-secondary);
        opacity: 0.7;
      }

      #imageInput {
        display: none;
      }

      .image-preview {
        max-width: 100%;
        max-height: 300px;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-medium);
        cursor: crosshair;
        display: none;
        transition: transform 0.3s ease;
        transform-origin: center;
      }

      .image-container {
        position: relative;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        border-radius: var(--border-radius);
      }

      .color-picker-crosshair {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid white;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
        pointer-events: none;
        transform: translate(-50%, -50%);
        transition: all 0.1s ease;
        display: none;
      }

      /* 颜色输入区域 */
      .color-input-group {
        margin-bottom: 25px;
      }

      .color-input-label {
        display: block;
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 8px;
      }

      .color-input {
        width: 100%;
        padding: 15px 20px;
        border: 2px solid var(--border-color);
        border-radius: var(--border-radius);
        font-size: 1rem;
        background: #FAFAFA;
        transition: all 0.3s ease;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .color-input:focus {
        outline: none;
        border-color: var(--primary-color);
        background: white;
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1), inset 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .color-preview {
        width: 100%;
        height: 120px;
        border-radius: var(--border-radius);
        border: 2px solid var(--border-color);
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
        background: linear-gradient(45deg, #ccc 25%, transparent 25%), 
                    linear-gradient(-45deg, #ccc 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #ccc 75%), 
                    linear-gradient(-45deg, transparent 75%, #ccc 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
      }

      .color-preview::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--preview-color, #3498db);
        transition: background-color 0.3s ease;
      }

      /* 颜色选择器 */
      .color-picker-container {
        margin-bottom: 25px;
      }

      .color-picker-grid {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 15px;
        align-items: center;
      }

      .native-color-picker {
        width: 60px;
        height: 60px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: var(--shadow-medium);
        transition: all 0.3s ease;
        background: none;
        overflow: hidden;
      }

      .native-color-picker::-webkit-color-swatch-wrapper {
        padding: 0;
        border: 3px solid white;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      .native-color-picker::-webkit-color-swatch {
        border: none;
        border-radius: 50%;
      }

      .native-color-picker:hover {
        transform: scale(1.05);
        box-shadow: var(--shadow-heavy);
      }

      /* 结果显示区域 */
      .results-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
      }

      .result-card {
        background: linear-gradient(135deg, #FAFAFA 0%, #F0F0F0 100%);
        border-radius: var(--border-radius);
        padding: 20px;
        border: 1px solid var(--border-color);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
      }

      .result-card:hover {
        background: linear-gradient(135deg, #F5F5F5 0%, #EBEBEB 100%);
        transform: translateY(-1px);
      }

      .result-label {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .result-value {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 15px;
        word-break: break-all;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
        background: white;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }

      .copy-button {
        width: 100%;
        padding: 10px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #0056CC 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
      }

      .copy-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
      }

      .copy-button:active {
        transform: translateY(0);
      }

      .copy-button.copied {
        background: linear-gradient(135deg, var(--success-color) 0%, #28A745 100%);
        box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
      }

      /* 预设颜色 */
      .preset-colors {
        margin-top: 25px;
      }

      .preset-title {
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 15px;
      }

      .preset-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 10px;
      }

      .preset-color {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid white;
        box-shadow: var(--shadow-light);
        transition: all 0.3s ease;
      }

      .preset-color:hover {
        transform: scale(1.1);
        box-shadow: var(--shadow-medium);
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .main-grid {
          grid-template-columns: 1fr;
          gap: 20px;
        }

        .container {
          padding: 0 10px;
        }

        .card {
          padding: 20px;
        }

        .header h1 {
          font-size: 2rem;
        }

        .preset-grid {
          grid-template-columns: repeat(6, 1fr);
        }

        .results-grid {
          grid-template-columns: 1fr;
        }
      }

      /* 动画效果 */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .card {
        animation: fadeIn 0.6s ease-out;
      }

      .card:nth-child(2) {
        animation-delay: 0.1s;
      }

      .card:nth-child(3) {
        animation-delay: 0.2s;
      }

      /* 工具提示 */
      .tooltip {
        position: relative;
      }

      .tooltip::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.8rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1000;
      }

      .tooltip:hover::after {
        opacity: 1;
      }

      /* 图片控制按钮 */
      .image-controls {
        position: absolute;
        top: 10px;
        right: 10px;
        display: none;
        flex-direction: column;
        gap: 8px;
        z-index: 10;
      }

      .image-container:hover .image-controls {
        display: flex;
      }

      .control-btn {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        color: var(--text-primary);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .control-btn:hover {
        background: rgba(255, 255, 255, 1);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }

      .control-btn:active {
        transform: scale(0.95);
      }

      .clear-btn:hover {
        background: rgba(255, 59, 48, 0.1);
        color: var(--error-color);
      }

      .control-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
      }

      .control-btn:disabled:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      /* 颜色滑块 */
      .color-picker-sliders {
        margin-top: 20px;
      }

      .color-picker-slider {
        position: relative;
        height: 20px;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        border: 2px solid white;
        overflow: hidden;
      }

      .color-picker-slider-cursor {
        position: absolute;
        top: -2px;
        width: 20px;
        height: 24px;
        background: white;
        border: 2px solid #333;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transform: translateX(-50%);
        transition: all 0.1s ease;
      }

      .color-picker-slider-cursor:hover {
        transform: translateX(-50%) scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>🎨 智能颜色工具箱</h1>
        <p>图片取色 · 颜色转换 · 实时预览</p>
      </div>

      <div class="main-grid">
        <!-- 左侧：图片上传和颜色输入 -->
        <div class="card">
          <h2 class="card-title">📸 图片取色器</h2>
          
          <div class="image-upload-area" id="uploadArea">
            <div class="upload-icon">📁</div>
            <div class="upload-text">点击或拖拽上传图片</div>
            <div class="upload-hint">支持 JPG、PNG、GIF 格式</div>
            <input type="file" id="imageInput" accept="image/*">
          </div>

          <div class="image-container" id="imageContainer">
            <img id="imagePreview" class="image-preview" alt="预览图片">
            <div class="color-picker-crosshair" id="crosshair"></div>
            <div class="image-controls" id="imageControls">
              <button class="control-btn zoom-in-btn" id="zoomInBtn" title="放大图片">🔍+</button>
              <button class="control-btn zoom-out-btn" id="zoomOutBtn" title="缩小图片">🔍-</button>
              <button class="control-btn reset-zoom-btn" id="resetZoomBtn" title="重置缩放">↻</button>
              <button class="control-btn clear-btn" id="clearImageBtn" title="清除图片">🗑️</button>
            </div>
          </div>

          <div class="color-input-group">
            <label class="color-input-label" for="colorInput">🎯 颜色值输入</label>
            <input 
              type="text" 
              id="colorInput" 
              class="color-input" 
              placeholder="输入颜色值，如 #3498db, rgb(52,152,219), hsl(204,70%,53%)"
            >
          </div>

          <div class="color-picker-container">
            <div class="color-picker-grid">
              <div>
                <label class="color-input-label">🎨 颜色选择器</label>
                <div class="color-preview" id="colorPreview"></div>
              </div>
              <input 
                type="color" 
                id="nativeColorPicker" 
                class="native-color-picker tooltip" 
                value="#3498db"
                data-tooltip="点击选择颜色"
              >
            </div>
            
            <div class="color-picker-sliders">
              <div 
                class="color-picker-slider" 
                id="hueSlider" 
                style="
                  background: linear-gradient(
                    to right,
                    #ff0000,
                    #ffff00,
                    #00ff00,
                    #00ffff,
                    #0000ff,
                    #ff00ff,
                    #ff0000
                  );
                "
              >
                <div class="color-picker-slider-cursor" id="hueCursor"></div>
              </div>
            </div>
          </div>

          <div class="preset-colors">
            <div class="preset-title">🌈 预设颜色</div>
            <div class="preset-grid">
              <div class="preset-color" style="background-color: #FF6B6B;" data-color="#FF6B6B"></div>
              <div class="preset-color" style="background-color: #4ECDC4;" data-color="#4ECDC4"></div>
              <div class="preset-color" style="background-color: #45B7D1;" data-color="#45B7D1"></div>
              <div class="preset-color" style="background-color: #96CEB4;" data-color="#96CEB4"></div>
              <div class="preset-color" style="background-color: #FFEAA7;" data-color="#FFEAA7"></div>
              <div class="preset-color" style="background-color: #DDA0DD;" data-color="#DDA0DD"></div>
              <div class="preset-color" style="background-color: #98D8C8;" data-color="#98D8C8"></div>
              <div class="preset-color" style="background-color: #F7DC6F;" data-color="#F7DC6F"></div>
              <div class="preset-color" style="background-color: #BB8FCE;" data-color="#BB8FCE"></div>
              <div class="preset-color" style="background-color: #85C1E9;" data-color="#85C1E9"></div>
              <div class="preset-color" style="background-color: #F8C471;" data-color="#F8C471"></div>
              <div class="preset-color" style="background-color: #82E0AA;" data-color="#82E0AA"></div>
              <div class="preset-color" style="background-color: #E8DAEF;" data-color="#E8DAEF"></div>
              <div class="preset-color" style="background-color: #D5DBDB;" data-color="#D5DBDB"></div>
              <div class="preset-color" style="background-color: #2C3E50;" data-color="#2C3E50"></div>
              <div class="preset-color" style="background-color: #E74C3C;" data-color="#E74C3C"></div>
            </div>
          </div>
        </div>

        <!-- 右侧：颜色格式转换结果 -->
        <div class="card">
          <h2 class="card-title">🔄 格式转换结果</h2>
          
          <div class="results-grid">
            <div class="result-card">
              <div class="result-label">HEX 十六进制</div>
              <div class="result-value" id="hexResult">#3498DB</div>
              <button class="copy-button" data-target="hexResult">复制 HEX</button>
            </div>

            <div class="result-card">
              <div class="result-label">RGB 红绿蓝</div>
              <div class="result-value" id="rgbResult">rgb(52, 152, 219)</div>
              <button class="copy-button" data-target="rgbResult">复制 RGB</button>
            </div>

            <div class="result-card">
              <div class="result-label">RGBA 带透明度</div>
              <div class="result-value" id="rgbaResult">rgba(52, 152, 219, 1)</div>
              <button class="copy-button" data-target="rgbaResult">复制 RGBA</button>
            </div>

            <div class="result-card">
              <div class="result-label">HSL 色相饱和度</div>
              <div class="result-value" id="hslResult">hsl(204, 70%, 53%)</div>
              <button class="copy-button" data-target="hslResult">复制 HSL</button>
            </div>

            <div class="result-card">
              <div class="result-label">HSLA 带透明度</div>
              <div class="result-value" id="hslaResult">hsla(204, 70%, 53%, 1)</div>
              <button class="copy-button" data-target="hslaResult">复制 HSLA</button>
            </div>

            <div class="result-card">
              <div class="result-label">HSV 色相饱和度明度</div>
              <div class="result-value" id="hsvResult">hsv(204, 76%, 86%)</div>
              <button class="copy-button" data-target="hsvResult">复制 HSV</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      class ColorToolbox {
        constructor() {
          this.initElements();
          this.initEventListeners();
          this.updateColor('#3498db');
        }

        initElements() {
          // 图片相关元素
          this.uploadArea = document.getElementById('uploadArea');
          this.imageInput = document.getElementById('imageInput');
          this.imagePreview = document.getElementById('imagePreview');
          this.imageContainer = document.getElementById('imageContainer');
          this.crosshair = document.getElementById('crosshair');
          this.imageControls = document.getElementById('imageControls');
          this.zoomInBtn = document.getElementById('zoomInBtn');
          this.zoomOutBtn = document.getElementById('zoomOutBtn');
          this.resetZoomBtn = document.getElementById('resetZoomBtn');
          this.clearImageBtn = document.getElementById('clearImageBtn');
          
          // 缩放相关变量
          this.currentZoom = 1;
          this.minZoom = 0.5;
          this.maxZoom = 3;
          this.zoomStep = 0.2;
          
          // 颜色输入元素
          this.colorInput = document.getElementById('colorInput');
          this.nativeColorPicker = document.getElementById('nativeColorPicker');
          this.colorPreview = document.getElementById('colorPreview');
          
          // 色相滑块元素
          this.hueSlider = document.getElementById('hueSlider');
          this.hueCursor = document.getElementById('hueCursor');
          
          // 当前颜色的HSL值
          this.currentHSL = { h: 204, s: 70, l: 53 };
          
          // 结果显示元素
          this.hexResult = document.getElementById('hexResult');
          this.rgbResult = document.getElementById('rgbResult');
          this.rgbaResult = document.getElementById('rgbaResult');
          this.hslResult = document.getElementById('hslResult');
          this.hslaResult = document.getElementById('hslaResult');
          this.hsvResult = document.getElementById('hsvResult');
          
          // 预设颜色
          this.presetColors = document.querySelectorAll('.preset-color');
          
          // 复制按钮
          this.copyButtons = document.querySelectorAll('.copy-button');
        }

        initEventListeners() {
          // 图片上传事件
          this.uploadArea.addEventListener('click', () => this.imageInput.click());
          this.imageInput.addEventListener('change', (e) => this.handleImageUpload(e));
          
          // 拖拽上传
          this.uploadArea.addEventListener('dragover', (e) => this.handleDragOver(e));
          this.uploadArea.addEventListener('dragleave', (e) => this.handleDragLeave(e));
          this.uploadArea.addEventListener('drop', (e) => this.handleDrop(e));
          
          // 图片点击取色
          this.imagePreview.addEventListener('click', (e) => this.handleImageClick(e));
          this.imagePreview.addEventListener('mousemove', (e) => this.handleImageMouseMove(e));
          this.imagePreview.addEventListener('mouseleave', () => this.hideCrosshair());
          
          // 颜色输入
          this.colorInput.addEventListener('input', (e) => this.handleColorInput(e));
          this.nativeColorPicker.addEventListener('input', (e) => this.updateColor(e.target.value));
          
          // 预设颜色点击
          this.presetColors.forEach(preset => {
            preset.addEventListener('click', () => {
              const color = preset.dataset.color;
              this.updateColor(color);
            });
          });
          
          // 复制按钮
          this.copyButtons.forEach(button => {
            button.addEventListener('click', (e) => this.handleCopy(e));
          });
          
          // 图片控制按钮
          this.zoomInBtn.addEventListener('click', () => this.zoomIn());
          this.zoomOutBtn.addEventListener('click', () => this.zoomOut());
          this.resetZoomBtn.addEventListener('click', () => this.resetZoom());
          this.clearImageBtn.addEventListener('click', () => this.clearImage());
          
          // 色相滑块事件
          this.hueSlider.addEventListener('mousedown', (e) => this.handleHueSliderStart(e));
          this.hueSlider.addEventListener('click', (e) => this.handleHueSliderClick(e));
        }

        handleImageUpload(e) {
          const file = e.target.files[0];
          if (file && file.type.startsWith('image/')) {
            this.loadImage(file);
          }
        }

        handleDragOver(e) {
          e.preventDefault();
          this.uploadArea.classList.add('dragover');
        }

        handleDragLeave(e) {
          e.preventDefault();
          this.uploadArea.classList.remove('dragover');
        }

        handleDrop(e) {
          e.preventDefault();
          this.uploadArea.classList.remove('dragover');
          
          const files = e.dataTransfer.files;
          if (files.length > 0 && files[0].type.startsWith('image/')) {
            this.loadImage(files[0]);
          }
        }

        loadImage(file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            this.imagePreview.src = e.target.result;
            this.imagePreview.style.display = 'block';
            this.uploadArea.style.display = 'none';
            
            // 重置缩放
            this.currentZoom = 1;
            this.applyZoom();
            
            // 显示控制按钮
            this.imageControls.style.display = 'flex';
          };
          reader.readAsDataURL(file);
        }

        handleImageClick(e) {
          const rect = this.imagePreview.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          
          // 获取图片上的颜色
          const color = this.getColorFromImage(x, y);
          if (color) {
            this.updateColor(color);
            this.showCrosshair(x, y);
          }
        }

        handleImageMouseMove(e) {
          const rect = this.imagePreview.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          this.showCrosshair(x, y);
        }

        showCrosshair(x, y) {
          this.crosshair.style.display = 'block';
          
          // 计算图片的实际显示区域
          const imageRect = this.imagePreview.getBoundingClientRect();
          const containerRect = this.imageContainer.getBoundingClientRect();
          
          // 计算图片在容器中的偏移（考虑缩放后的居中效果）
          const imageOffsetX = (containerRect.width - imageRect.width) / 2;
          const imageOffsetY = (containerRect.height - imageRect.height) / 2;
          
          // 设置十字准星位置（相对于容器）
          this.crosshair.style.left = (imageOffsetX + x) + 'px';
          this.crosshair.style.top = (imageOffsetY + y) + 'px';
        }

        hideCrosshair() {
          this.crosshair.style.display = 'none';
        }

        getColorFromImage(x, y) {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          
          canvas.width = this.imagePreview.naturalWidth;
          canvas.height = this.imagePreview.naturalHeight;
          
          ctx.drawImage(this.imagePreview, 0, 0);
          
          // 计算实际图片坐标，考虑缩放比例
          const scaleX = this.imagePreview.naturalWidth / (this.imagePreview.offsetWidth * this.currentZoom);
          const scaleY = this.imagePreview.naturalHeight / (this.imagePreview.offsetHeight * this.currentZoom);
          
          const actualX = Math.floor(x * scaleX);
          const actualY = Math.floor(y * scaleY);
          
          try {
            const imageData = ctx.getImageData(actualX, actualY, 1, 1);
            const [r, g, b] = imageData.data;
            return `rgb(${r}, ${g}, ${b})`;
          } catch (error) {
            console.error('无法获取图片颜色:', error);
            return null;
          }
        }

        handleColorInput(e) {
          const value = e.target.value.trim();
          if (value) {
            this.updateColor(value);
          }
        }

        updateColor(colorValue) {
          try {
            const color = this.parseColor(colorValue);
            if (!color) return;
            
            // 更新当前HSL值
            this.currentHSL = { h: color.h, s: color.s, l: color.l };
            
            // 更新预览
            this.colorPreview.style.setProperty('--preview-color', color.hex);
            this.nativeColorPicker.value = color.hex;
            this.colorInput.value = color.hex;
            
            // 更新色相滑块位置
            const huePercentage = this.currentHSL.h / 360;
            this.hueCursor.style.left = `${huePercentage * 100}%`;
            
            // 更新所有格式
            this.hexResult.textContent = color.hex;
            this.rgbResult.textContent = `rgb(${color.r}, ${color.g}, ${color.b})`;
            this.rgbaResult.textContent = `rgba(${color.r}, ${color.g}, ${color.b}, 1)`;
            this.hslResult.textContent = `hsl(${color.h}, ${color.s}%, ${color.l}%)`;
            this.hslaResult.textContent = `hsla(${color.h}, ${color.s}%, ${color.l}%, 1)`;
            this.hsvResult.textContent = `hsv(${color.h}, ${color.sv}%, ${color.v}%)`;
            
          } catch (error) {
            console.error('颜色解析错误:', error);
          }
        }

        parseColor(colorValue) {
          // 创建临时元素来解析颜色
          const tempDiv = document.createElement('div');
          tempDiv.style.color = colorValue;
          document.body.appendChild(tempDiv);
          
          const computedColor = window.getComputedStyle(tempDiv).color;
          document.body.removeChild(tempDiv);
          
          if (computedColor === 'rgba(0, 0, 0, 0)' || computedColor === 'transparent') {
            return null;
          }
          
          // 解析 RGB 值
          const rgbMatch = computedColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
          if (!rgbMatch) return null;
          
          const r = parseInt(rgbMatch[1]);
          const g = parseInt(rgbMatch[2]);
          const b = parseInt(rgbMatch[3]);
          
          // 转换为其他格式
          const hex = this.rgbToHex(r, g, b);
          const hsl = this.rgbToHsl(r, g, b);
          const hsv = this.rgbToHsv(r, g, b);
          
          return {
            r, g, b,
            hex,
            h: hsl.h,
            s: hsl.s,
            l: hsl.l,
            sv: hsv.s,
            v: hsv.v
          };
        }

        rgbToHex(r, g, b) {
          return '#' + [r, g, b].map(x => {
            const hex = x.toString(16);
            return hex.length === 1 ? '0' + hex : hex;
          }).join('');
        }

        rgbToHsl(r, g, b) {
          r /= 255;
          g /= 255;
          b /= 255;
          
          const max = Math.max(r, g, b);
          const min = Math.min(r, g, b);
          let h, s, l = (max + min) / 2;
          
          if (max === min) {
            h = s = 0;
          } else {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            
            switch (max) {
              case r: h = (g - b) / d + (g < b ? 6 : 0); break;
              case g: h = (b - r) / d + 2; break;
              case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
          }
          
          return {
            h: Math.round(h * 360),
            s: Math.round(s * 100),
            l: Math.round(l * 100)
          };
        }

        rgbToHsv(r, g, b) {
          r /= 255;
          g /= 255;
          b /= 255;
          
          const max = Math.max(r, g, b);
          const min = Math.min(r, g, b);
          let h, s, v = max;
          
          const d = max - min;
          s = max === 0 ? 0 : d / max;
          
          if (max === min) {
            h = 0;
          } else {
            switch (max) {
              case r: h = (g - b) / d + (g < b ? 6 : 0); break;
              case g: h = (b - r) / d + 2; break;
              case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
          }
          
          return {
            h: Math.round(h * 360),
            s: Math.round(s * 100),
            v: Math.round(v * 100)
          };
        }

        async handleCopy(e) {
          const button = e.target;
          const targetId = button.dataset.target;
          const text = document.getElementById(targetId).textContent;
          
          try {
            await navigator.clipboard.writeText(text);
            
            // 显示复制成功状态
            const originalText = button.textContent;
            button.textContent = '✓ 已复制';
            button.classList.add('copied');
            
            setTimeout(() => {
              button.textContent = originalText;
              button.classList.remove('copied');
            }, 2000);
            
          } catch (error) {
            console.error('复制失败:', error);
            
            // 降级方案
            const textArea = document.createElement('textarea');
            textArea.value = text;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            
            button.textContent = '✓ 已复制';
            button.classList.add('copied');
            
            setTimeout(() => {
              button.textContent = button.textContent.replace('✓ 已复制', '复制');
              button.classList.remove('copied');
            }, 2000);
          }
        }

        // 图片缩放功能
        zoomIn() {
          if (this.currentZoom < this.maxZoom) {
            this.currentZoom += this.zoomStep;
            this.applyZoom();
          }
        }

        zoomOut() {
          if (this.currentZoom > this.minZoom) {
            this.currentZoom -= this.zoomStep;
            this.applyZoom();
          }
        }

        resetZoom() {
          this.currentZoom = 1;
          this.applyZoom();
        }

        applyZoom() {
          this.imagePreview.style.transform = `scale(${this.currentZoom})`;
          // 更新按钮状态
          this.zoomInBtn.disabled = this.currentZoom >= this.maxZoom;
          this.zoomOutBtn.disabled = this.currentZoom <= this.minZoom;
        }

        clearImage() {
          // 清除图片预览
          this.imagePreview.style.display = 'none';
          this.imagePreview.src = '';
          this.imageControls.style.display = 'none';
          
          // 重置缩放
          this.currentZoom = 1;
          this.applyZoom();
          
          // 清除文件输入
          this.imageInput.value = '';
          
          // 隐藏十字准星
          this.hideCrosshair();
          
          // 显示上传区域
          this.uploadArea.style.display = 'block';
        }
        
        // 色相滑块功能
        handleHueSliderClick(e) {
          const rect = this.hueSlider.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const percentage = Math.max(0, Math.min(1, x / rect.width));
          this.updateHue(percentage * 360);
        }
        
        handleHueSliderStart(e) {
          e.preventDefault();
          this.isDraggingHue = true;
          
          const handleMouseMove = (e) => {
            if (this.isDraggingHue) {
              const rect = this.hueSlider.getBoundingClientRect();
              const x = e.clientX - rect.left;
              const percentage = Math.max(0, Math.min(1, x / rect.width));
              this.updateHue(percentage * 360);
            }
          };
          
          const handleMouseUp = () => {
            this.isDraggingHue = false;
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
          };
          
          document.addEventListener('mousemove', handleMouseMove);
          document.addEventListener('mouseup', handleMouseUp);
          
          // 立即处理当前位置
          this.handleHueSliderClick(e);
        }
        
        updateHue(hue) {
          this.currentHSL.h = hue;
          const hslColor = `hsl(${this.currentHSL.h}, ${this.currentHSL.s}%, ${this.currentHSL.l}%)`;
          const hexColor = this.hslToHex(this.currentHSL.h, this.currentHSL.s, this.currentHSL.l);
          
          // 更新滑块游标位置
          const percentage = hue / 360;
          this.hueCursor.style.left = `${percentage * 100}%`;
          
          // 更新颜色
          this.updateColor(hexColor);
        }
        
        // HSL转HEX
        hslToHex(h, s, l) {
          l /= 100;
          const a = s * Math.min(l, 1 - l) / 100;
          const f = n => {
            const k = (n + h / 30) % 12;
            const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
            return Math.round(255 * color).toString(16).padStart(2, '0');
          };
          return `#${f(0)}${f(8)}${f(4)}`;
        }
      }

      // 初始化应用
      document.addEventListener('DOMContentLoaded', () => {
        new ColorToolbox();
      });
    </script>
  </body>
</html>
